<template>
  <div v-loading="fullscreenLoading" class="app-container">
    <el-row>
      <el-col :span="22" style="display: flex">
        <el-text style="width: 80px; text-align: center">起始时间</el-text>
        <el-date-picker v-model="queryParams.starttime" type="datetime" placeholder="选择时间" value-format="YYYY-MM-DD HH:mm:ss" />
        <el-text style="width: 80px; text-align: center"> FGCODE</el-text>
        <el-select v-model="queryParams.productSpecName" style="width: 30%" filterable clearable>
          <el-option v-for="item in FgcodeOptions" :key="item.productSpecName" :label="item.productSpecName" :value="item.productSpecName" />
        </el-select>
        <el-text style="width: 60px; text-align: center">工单号</el-text>
        <el-input v-model="queryParams.productRequestName" style="width: 250px" placeholder="型号" />
      </el-col>
      <el-col :span="2" style="display: flex; justify-content: center">
        <el-button type="primary" :icon="Search" @click="submitForm">查询</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px">
      <el-table :data="storeDataList" border>
        <el-table-column prop="productRequestName" label="工单号" align="center" />
        <el-table-column prop="productSpecName" width="400px" label="产品型号" align="center" />
        <el-table-column prop="processOperationName" label="工序ID" align="center" />
        <el-table-column prop="description" label="工序名称" align="center" />
        <el-table-column prop="position" label="序号" align="center" />
        <el-table-column label="数量" :show-overflow-tooltip="true" align="center">
          <template #default="scope">
            <el-link type="primary" @click="showSNData(scope.row)">{{ scope.row.sums }}</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination-container">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="[50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </el-row>

    <!-- 添加sn查询对话框 -->
    <el-dialog v-model="open" draggable width="800px" top="2vh" append-to-body>
      <el-table :data="storeDatasnList" v-loading="snfullscreenLoading" border height="80vh">
        <el-table-column prop="ocId" label="FPC ID 排线码" align="center" />
        <el-table-column prop="moduleId" label="Module ID" align="center" />
        <el-table-column prop="modelSN" label="玻璃码" align="center" />
        <el-table-column prop="customerId" label="客户二维码" align="center" />
        <el-table-column prop="lastEventTime" label="事件时间" align="center" />
      </el-table>
      <el-row class="pagination-container">
        <el-pagination
          @size-change="snsizeChange"
          @current-change="sncurrentChange"
          :current-page="snpage"
          :page-sizes="[15, 50, 100, 200]"
          :page-size="snpageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sntotal" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup name="WIP">
import { ref } from 'vue'
import { Fgcodelist, wiplist, snlist } from '@/api/infoSerch/wipSerch'
import { forEach } from 'lodash'

const value = ref('')
const fullscreenLoading = ref(false)
const snfullscreenLoading = ref(false)
const FgcodeOptions = ref([])
const storeDataList = ref([])
const storeList = ref([])
const storeDatasnList = ref([])
const snList = ref([])
const open = ref(false)
// 查询各站点产出的参数
const queryParams = reactive({
  starttime: '',
  productSpecName: '',
  productRequestName: ''
})
// 查询sn的参数
const snqueryParams = reactive({
  starttime: '',
  productRequestName: '',
  productSpecName: '',
  processOperationName: ''
})
// 分页栏中的数据条数
const total = ref(0)
// 分页栏选中的页数
const page = ref(1)
// 每页显示的数据量
const pageSize = ref(50)
// sn分页栏中的数据条数
const sntotal = ref(0)
// sn分页栏选中的页数
const snpage = ref(1)
// sn每页显示的数据量
const snpageSize = ref(15)

function getFgcodeList() {
  Fgcodelist().then((res) => {
    FgcodeOptions.value = res.data
  })
}

function submitForm() {
  //   console.log(value.value)
  // console.log(queryParams)
  fullscreenLoading.value = true
  // 去除工单号前后空格
  queryParams.productRequestName = queryParams.productRequestName.trim()
  // 清空表格
  storeDataList.value = []
  wiplist({ ...queryParams }).then((res) => {
    // 获得数据条数
    total.value = res.data.length
    // 暂存数据
    storeList.value = res.data
    getTableData()
  })
}
// 获得的数据导入表格
function getTableData() {
  storeDataList.value = storeList.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  fullscreenLoading.value = false
}
// val为分页栏中选中的页数
function currentChange(val) {
  // console.log(val)
  page.value = val
  getTableData()
}
// val为分页栏中选中的每页数据量
function sizeChange(val) {
  pageSize.value = val
  page.value = 1 // 切换每页数据量时，重置为第一页
  getTableData()
}
// 获得的sn数据导入表格
function getSNTableData() {
  storeDatasnList.value = snList.value.slice((snpage.value - 1) * snpageSize.value, snpage.value * snpageSize.value)
  snfullscreenLoading.value = false
}
// val为sn分页栏中选中的页数
function sncurrentChange(val) {
  // console.log(val)
  snpage.value = val
  getSNTableData()
}
// val为sn分页栏中选中的每页数据量
function snsizeChange(val) {
  snpageSize.value = val
  snpage.value = 1 // 切换每页数据量时，重置为第一页
  getSNTableData()
}

// 监听 value 的变化，更新 queryParams
watch(value, (newValue) => {
  queryParams.productSpecName = newValue
})
// 获得产品型号下拉列表
getFgcodeList()

// 点击数量查询sn
function showSNData(row) {
  open.value = true
  //清空表格
  storeDatasnList.value = []
  //loading展示
  snfullscreenLoading.value = true
  snqueryParams.starttime = queryParams.starttime
  snqueryParams.productRequestName = row.productRequestName
  snqueryParams.productSpecName = row.productSpecName
  snqueryParams.processOperationName = row.processOperationName
  snlist({ ...snqueryParams }).then((res) => {
    // 获得数据条数
    sntotal.value = res.data.length
    // 暂存数据
    snList.value = res.data
    getSNTableData()
  })
}
</script>
<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 8px;
}
</style>